<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期记录</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航 -->
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-xl font-bold text-gray-900">纪念日记录</h1>
            <button class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md hover:bg-blue-700 transition-colors">
                <i class="fas fa-plus"></i>
            </button>
        </div>
        
        <!-- 主要内容 - 宝宝出生日 -->
        <div class="date-card fade-in">
            <div class="flex items-start">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-700 mr-4">
                    <i class="fas fa-birthday-cake text-xl"></i>
                </div>
                <div class="flex-1">
                    <h2 class="text-lg font-bold text-blue-900">宝宝出生日</h2>
                    <p class="text-blue-800 text-sm mt-1">2023年6月15日</p>
                    
                    <div class="flex justify-between items-center space-x-3 mt-5">
                        <div class="bg-white/50 rounded-xl p-3 text-center flex-1">
                            <div class="text-3xl font-bold text-blue-800">0</div>
                            <div class="text-xs text-blue-700 mt-1">年</div>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center flex-1">
                            <div class="text-3xl font-bold text-blue-800">11</div>
                            <div class="text-xs text-blue-700 mt-1">月</div>
                        </div>
                        <div class="bg-white/50 rounded-xl p-3 text-center flex-1">
                            <div class="text-3xl font-bold text-blue-800">20</div>
                            <div class="text-xs text-blue-700 mt-1">天</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-3 mt-5">
                <div class="bg-white/60 rounded-lg p-3">
                    <div class="text-xs text-blue-700 mb-1">当前日期</div>
                    <div class="text-blue-900 font-medium">2024年6月5日</div>
                </div>
                <div class="bg-white/60 rounded-lg p-3">
                    <div class="text-xs text-blue-700 mb-1">总天数</div>
                    <div class="text-blue-900 font-medium">355天</div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-blue-200/50">
                <div class="flex items-center">
                    <div class="flex-1">
                        <div class="flex space-x-2 items-center">
                            <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                            <span class="text-xs text-blue-800">总周数：50周5天</span>
                        </div>
                    </div>
                    <button class="bg-white text-blue-700 text-xs py-1.5 px-3 rounded-full shadow-sm font-medium hover:bg-blue-50 transition-colors">
                        <i class="fas fa-share-alt mr-1"></i> 分享
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 其他纪念日 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.1s">
            <div class="flex justify-between items-center mb-4">
                <h2 class="section-header mb-0">其他纪念日</h2>
                <div class="flex space-x-2">
                    <button class="icon-btn text-sm">
                        <i class="fas fa-sort"></i>
                    </button>
                    <button class="icon-btn text-sm">
                        <i class="fas fa-filter"></i>
                    </button>
                </div>
            </div>
            
            <div class="card hover:shadow-md transition-shadow">
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-600 mr-3">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div>
                            <div class="list-label">结婚纪念日</div>
                            <div class="text-xs text-gray-500">2022年9月10日</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-pink-600 font-semibold">1年8月26天</div>
                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="card hover:shadow-md transition-shadow mt-4">
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
                            <i class="fas fa-shoe-prints"></i>
                        </div>
                        <div>
                            <div class="list-label">宝宝第一次走路</div>
                            <div class="text-xs text-gray-500">2024年3月20日</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-green-600 font-semibold">2月16天</div>
                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="card hover:shadow-md transition-shadow mt-4">
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr-3">
                            <i class="fas fa-comment"></i>
                        </div>
                        <div>
                            <div class="list-label">宝宝第一次说话</div>
                            <div class="text-xs text-gray-500">2024年2月5日</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-purple-600 font-semibold">4个月</div>
                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 添加更多纪念日卡片 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.2s">
            <div class="card border-dashed border-2 border-gray-200 bg-transparent flex flex-col items-center justify-center p-8 hover:border-blue-400 transition-colors cursor-pointer">
                <div class="w-14 h-14 rounded-full bg-blue-50 flex items-center justify-center mb-3">
                    <i class="fas fa-plus text-blue-500 text-xl"></i>
                </div>
                <h3 class="font-medium text-gray-800 mb-1">添加更多纪念日</h3>
                <p class="text-gray-500 text-sm text-center">记录更多宝宝成长中的重要时刻</p>
            </div>
        </div>
        
        <!-- 即将到来的纪念日 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.3s">
            <h2 class="section-header">即将到来</h2>
            <div class="card bg-gradient-to-r from-indigo-50 to-blue-50 border-none">
                <div class="flex items-center">
                    <div class="w-14 h-14 bg-white rounded-full shadow-sm flex items-center justify-center mr-4">
                        <i class="fas fa-birthday-cake text-amber-500 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-gray-900">宝宝一周岁生日</h3>
                        <div class="flex items-center mt-1">
                            <i class="fas fa-calendar-day text-blue-500 mr-1 text-xs"></i>
                            <span class="text-sm text-gray-600">2024年6月15日</span>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="text-xl font-bold text-blue-600">10</div>
                        <div class="text-xs text-gray-500">天后</div>
                    </div>
                </div>
                
                <div class="mt-4 pt-4 border-t border-indigo-100">
                    <div class="progress-bar">
                        <div class="progress-fill bg-blue-500" style="width: 96%"></div>
                    </div>
                    <div class="flex justify-between text-xs text-gray-500 mt-1">
                        <span>已等待355天</span>
                        <span>还有10天</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="tab-icon fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="tab-item active">
            <i class="tab-icon fas fa-calendar-alt"></i>
            <span>日期</span>
        </div>
        <div class="tab-item">
            <i class="tab-icon fas fa-chart-line"></i>
            <span>生长</span>
        </div>
        <div class="tab-item">
            <i class="tab-icon fas fa-cog"></i>
            <span>设置</span>
        </div>
    </div>
</body>
</html> 